<template>
	<view class="outside" :style="{height:windowHeight + 'px'}">
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" left-icon="arrowleft" title="网易云音乐" background-color="#d44439" color="white"></uni-nav-bar>
		<view class="container" :style="{'background-image': 'url(' + nowfengmian + ')'}">
			<GeDie @bofang="bofang" :nowfengmian="nowfengmian"></GeDie>
			<GeCi :lyric="lyric" :geming="geming" :geshou="geshou"></GeCi>
		</view>
	</view>
</template>

<script>
	import {detail,lyric,songUrl} from '../../api/BoFangQi/BoFangQi.js'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import GeDie from '../../components/GeDie/GeDie.vue'
	import GeCi from '../../components/GeCi/GeCi.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		onLoad(option) {
			this.fengmian(option.id)//获取歌曲封面
			this.geci(option.id)//获取歌曲歌词
			this.musicUrl(option.id)//获取歌曲url
			uni.getSystemInfo({
				success:(res) => {
					//console.log(res)
					this.windowHeight = res.windowHeight
					//console.log(this.windowHeight)
				}
			})
		},
		data() {
			return {
				nowfengmian:'',
				nowmusicUrl:'',
				geming:'',
				geshou:'',
				lyric:'',
				windowHeight:null
			}
		},
		components:{
			uniNavBar,
			GeDie,
			GeCi
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
				    delta: 1
				})
			},
			fengmian(id){
				detail({ids:id}).then(res => {
					this.nowfengmian = res.songs[0].al.picUrl//歌曲封面
					this.geming = res.songs[0].name//歌名
					this.geshou = res.songs[0].ar[0].name//歌手
					var info = {
						geshou:this.geshou,
						geming:this.geming,
						id
					}
					this.$store.state.zuijingbofang.push(info)
					console.log(this.$store.state.zuijingbofang)
				})
			},
			geci(id){
				lyric({id:id}).then(res => {
					this.lyric = res.lrc.lyric
				})
			},
			musicUrl(id){
				songUrl({id:id}).then(res => {
					this.nowmusicUrl = res.data[0].url
				})
			},
			bofang(){
				let that = this
				if(that.music == this.nowmusicUrl){
					if(innerAudioContext.paused){
						innerAudioContext.play()
					}else{
						innerAudioContext.pause()
						innerAudioContext.onPause(()=>{
							innerAudioContext.startTime = innerAudioContext.currentTime
						})
					}
				}else{
					innerAudioContext.src = this.nowmusicUrl
					if(innerAudioContext.paused){
							innerAudioContext.play()
						}else{
							innerAudioContext.pause()
							innerAudioContext.onPause(()=>{
								innerAudioContext.startTime = innerAudioContext.currentTime
							})
						}										
				}
				that.music = this.nowmusicUrl 				
			}
		}
	}
</script>

<style lang="scss">
	.outside{
		width: 750rpx;
		//height: 1330rpx;
		.container{
			width: 100%;
			height: 93%;
		}
	}
</style>
